<template>
	<view class="page">
		<customNavBar1 title="订单填写" style='color: #111 !important;'></customNavBar1>
		<view class="hander-one" :style="{ 'padding-top': (mt) + 'px' }">
			<view class="topInfo">
				<view class="name">{{ scenicName }}</view>
				<view class="date">
					出游日期<text>{{ checkTime }}</text>
				</view>
			</view>
			<view class="topInfo" v-for="(item, index) in isScenicTicketDTOList " :key="index">
				<view class="name">
					<view class="left">{{ scenicName }}{{ item.ticketName }}</view>
					<view class="right">
						(x<text>{{ item.num }}</text>)￥<text>{{ item.realPrice }}</text>
					</view>
				</view>
				<view class="remark">
					{{ remarks[typeCfgJson[item.ticketType] - 1] }}
				</view>
				<view class="addPerson" @click="checkPerson(index)">
					<image src="https://i.ringzle.com/file/20240415/5f00b972fc0e4e3da82e16f726cb2468.png" mode="">
					</image>
					<text style="font-size: 26rpx;">添加游客</text>
				</view>
				<view class="chekedPerson">
					<u-cell v-for="(item2, index2) in item.sailTicket" :key="index2" style="display: flex;">
						<u-icon @click="minus(index, index2)" name="minus-circle" slot="icon" size="42" color="#FEAC2C"
							customStyle="margin-top:16rpx"></u-icon>
						<view slot="title" class="title">
							<div style="display: flex">
								<view class="right">
									<view class="top">
										<text class="index">{{ item2.realNameCopy }}</text>
										<text>{{ typeCfg[item2.personType] }}</text>
									</view>
									<view class="bottom">
										<text>{{ cardCfg[item2.cardType] }}</text>
										<text>{{ item2.idCodeCopy }}</text>
									</view>
								</view>
							</div>
						</view>
					</u-cell>
				</view>
			</view>
			<view class="person">
				<view class="tit">联系人信息</view>
				<view class="cellBox">
					<u-cell-group :border="false">
						<u-cell>
							<text slot="icon" style="font-size: 28rpx"><text class="red">*</text>联系人</text>
							<view slot="title" class="title">
								<u--input @blur="GersName" @confirm="GersName" border="none" class="input"
									inputAlign="right" placeholderStyle="font-size:26rpx" placeholder="请输入联系人"
									v-model="PassengersName"></u--input>
							</view>

						</u-cell>
						<u-cell :border="false">
							<text slot="icon" style="font-size: 28rpx"><text class="red">*</text>手机号码</text>
							<view slot="title" class="title">
								<u--input border="none" class="input" inputAlign="right"
									placeholderStyle="font-size:26rpx" placeholder="请输入手机号码"
									v-model="fromData.sail.linkMobileCopy"></u--input>
							</view>

						</u-cell>
					</u-cell-group>
				</view>
			</view>
			<view class="yhq" @click="couponList">
				<u-cell-group :border="false">
					<u-cell isLink :border="false" rightIconStyle="font-size:24rpx">
						<text slot="icon" class="icon" style="margin-top:4rpx">券</text>
						<view slot="title" class="title">
							<text v-if="coupon.length==0">暂未选择优惠券</text>
							<text v-else>{{coupon.name}}</text>
						</view>
					</u-cell>
				</u-cell-group>
			</view>

			<!-- 提交栏 -->
			<view class="operation">
				<view class="left">
					<text>实付金额</text>
					<text style="font-weight: bold;">￥</text>
					<text style="font-weight: bold;" v-if="coupon.length==0">{{ Math.round(fromData.sail.orderAmount*100)/100 }}</text>
					<text style="font-weight: bold;" v-else-if="coupon.length!=0&&fromData.sail.orderAmount>coupon.price">{{ Math.round((fromData.sail.orderAmount - coupon.price)*100)/100  }}</text>
					<text style="font-weight: bold;" v-else >0.01</text>
					<!-- <text>已减 ¥{{ fromData.sail.discountAmount }}</text> -->
				</view>
				<view class="right">
					<u-icon v-if="!feeShow" name="arrow-down" label="明细" space='12' labelColor="#666" labelSize="24"
						customStyle="color:#666" label-pos="left" @click="feeShow = true"></u-icon>
					<u-icon v-else name="arrow-up" label="明细" space='12' labelColor="#666" labelSize="24"
						customStyle="color:#666" label-pos="left" @click="feeShow = false"></u-icon>
					<text @click="btnSail">提交订单</text>
				</view>
			</view>
			<!-- 费用明细 -->
			<u-popup :show="feeShow" @close="close2" overlayStyle="bottom:112rpx"
				customStyle="bottom:112rpx;border-radius:24rpx 24rpx 0 0">
				<view class="feeDetail">
					<view class="tit">
						<text>费用明细</text>
						<u-icon name="close-circle" size="40" color="#999" @click="close2()"></u-icon>
					</view>
					<view class="list">
						<view class="item">
							<view class="top" v-for="(item, index) in isScenicTicketDTOList" :key="index">
								<view>{{ item.ticketName }}</view>
								<view class="time">*{{ item.num }}</view>
								<view class="">
									￥{{ item.realPrice * item.num }}
								</view>
							</view>
							<view class="top" v-if="coupon.length!=0">
								<view>优惠券抵扣</view>
								<view class="time"></view>
								<view class="">
									￥-{{ coupon.price }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
			<!-- 微信支付 -->
			<WechatPay ref="wxPay" @confirmPay="toPay" @cancelPay="cancelPay"></WechatPay>
			<u-popup :show="addShow" @close="addShow = false" @open='openUserInfo()'>
				<view class="details">
					<view class="title">
						<text>游客信息</text>
						<image src="@/static/index/steamerTicket/icon_close.png" @tap="addShow = false"></image>
					</view>
					<view class="has_info">
						<view class="add_user" @tap="addPerson">
							<image src="https://i.ringzle.com/file/20240415/5f00b972fc0e4e3da82e16f726cb2468.png"
								mode="">
							</image>

							<text>新增</text>
						</view>
						<view class="add_list" v-if="addList.length > 0">
							<u-swipe-action>
								<u-swipe-action-item :options="options" v-for="(item, index) in addList" :key="index"
									@click="deletePerson(item)" :ref="'swipeAction' + index">
									<view class="swipe-action u-border-top u-border-bottom">
										<view class="swipe-action__content">

											<view class="sac_item">
												<image class="chk" @tap="selectPerson(index)"
													:src="item.isSelect ? 'https://i.ringzle.com/file/20240222/ef0d5ce39fd3422692a1be8feb08e45f.png' : 'https://fsy.shengsi.gov.cn/file/20240906/119a9318c011420ba8b7677bc12fbf00.png'">
												</image>
												<view class="si_info">
													<view class="name">
														<view>{{ item.passengerNameCopy }}</view>
														<view>{{ typeCfg[item.personType] }}</view>
													</view>
													<view class="idcard">
														<text>{{ cardCfg[item.cardType] }}</text>
														<text>{{ item.cardCopy }}</text>
													</view>
												</view>
												<image class="edit"
													src="@/static/my/commonInformation/icon_edit.png"
													@tap="toEdit(item)">
												</image>
											</view>
										</view>
									</view>
								</u-swipe-action-item>
							</u-swipe-action>

						</view>
					</view>
					<view class="add_submit" @tap="confirmAdd">确定</view>
				</view>
			</u-popup>
			<GetPhoneNumber ref="phoneNumber" @loginSuccess="openUserInfo"></GetPhoneNumber>
		</view>
	</view>
</template>

<script>
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	import WechatPay from '@/compoments/wechatPay/index.vue'
	import customNavBar1 from '@/compoments/uNavBar1/index2.vue'
	export default {
		components: {
			WechatPay,
			customNavBar1,
			GetPhoneNumber
		},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				minNum: 1,
				orderCode: '',
				show: false,
				cardCfg: this.$uct.typeToText,
				remarks: ['', '6(不含)-18周岁(含)或身高1.2米 (不含) -1.5米(含)未成年人', '', '全国60(含)-69周岁 (含)的老年人', ''],
				typeCfg: {
					1: '成人票',
					2: '儿童票',
					3: '免票儿童',
					4: '老人票',

				},
				typeCfgJson: { //景区3是儿童票，2是老人票,1成人，4半价（只限基湖沙滩）
					1: 1,
					2: 4,
					3: 2,
					4: 5 //不要任何提示语
				},
				typeCfgSc: {
					1: '成人票',
					2: '老人票',
					3: '儿童票',
					4: '半价票',
				},
				addShow: false,
				currentDate: 0,
				value: 1,
				tel: "",
				date: [1, 2, 3],
				addPersonShow: false,
				checkedper: [],
				addList: [],
				feeShow: false,
				list: {},
				checkTime: '',
				fromData: {
					sail: {
						spotId: '',
						discountAmount: 0,
						linkMobile: JSON.parse(uni.getStorageSync('userInfo')).mobile,
						linkName: "",
						num: 1,
						orderAmount: 0,
						realityPay: 0,
						playDate: '',
					},
					sailTicket: [],
				},
				rouList: {},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#333333"
				},
				passengerList: [],
				lsKey: '',
				weeks: ['周日', '周一 ', '周二', '周三', '周四', '周五', '周六'],
				dateArr: [],
				currentTime: null,
				currentYear: '',
				checkTime: '',
				scenicName: '',
				isScenicTicketDTOList: '',
				oprationIndex: 0,
				PassengersName: '',
				coupon:[]
			}
		},


		onLoad(option) {
			const isScenicTicketDTOList = JSON.parse(decodeURIComponent(option.isScenicTicketDTOList ? option
				.isScenicTicketDTOList : '[]'));
			this.isScenicTicketDTOList = isScenicTicketDTOList;
			this.checkTime = option.checkTime;
			this.scenicName = option.scenicName;
			var today = new Date();
			var tYear = today.getFullYear();
			this.currentYear = tYear;
			this.fromData.sail = {
				spotId: option.scenicId,
				discountAmount: 0,
				linkMobile: JSON.parse(uni.getStorageSync('userInfo')).mobile,
				linkMobileCopy: JSON.parse(uni.getStorageSync('userInfo')).mobile,
				linkName: "",
				linkNameCopy: "",
				num: option.totalNumber,
				orderAmount: option.totalPrice,
				realityPay: option.totalPrice,
				playDate: this.checkTime,
			}
		},
		mounted() {},
		watch: {},
		onShow() {
			this.toGetPassengers();
			let that = this
			uni.$on('updateData',function(data){
				console.log(data);
				if(data){
					that.coupon = data
				}else{
					that.coupon = []
				}
			})
		},
		methods: {
			couponList(){
				uni.navigateTo({
				    url: `/pagesMy/coupon/useList?type=1&price=${this.fromData.sail.orderAmount}`
				});
			},
			GersName(e) {
				console.log(e);
				this.PassengersName = e;
				this.fromData.sail.linkNameCopy = e;
				this.fromData.sail.linkName = e;
				console.log(this.fromData.sail);

			},
			checkPerson(index) {
				this.oprationIndex = index;
				this.addShow = true;
				//this.$set(this.ScenicList.isScenicTicketDTOList[index], 'person',);
			},
			openUserInfo() {
				this.toGetPassengers()
			},
			confirmAdd() {
				this.fromData.sailTicket = this.addList.filter(d => d.isSelect == true);
				if (this.fromData.sailTicket.length == 0) {
					return
				}
				// this.fromData.sailTicket.forEach((d, i) => {
				// 	this.$set(this.fromData.sailTicket[i], 'childs', 0);
				// 	this.$api.get('/api/commonPerson/list', {
				// 		credentialType: d.cardType,
				// 		credentialNum: d.card
				// 	}).then(res => {
				// 		if (res.data.code === 0) {
				// 			this.$set(this.fromData.sailTicket[i], 'discounts', res.data
				// 				.data); //discounts是否有优惠 1是 0否
				// 		} else this.$showModal(res.data.msg);
				// 	})
				// })
				this.addList.forEach((d, i) => {
					this.$set(this.addList[i], 'isSelect', false)
				})

				this.fromData.sailTicket = this.fromData.sailTicket.map(({
					passengerName,
					card,
					cardType,
					personType
				}) => ({
					personType,
					cardType,
					idCode: card,
					idCodeCopy: this.$aesTm.tuomin(card, 3),
					realName: passengerName,
					realNameCopy: this.$aesTm.tuomin(passengerName, 1),
					ticketType: this.isScenicTicketDTOList[this.oprationIndex].ticketType,
					ticketId: this.isScenicTicketDTOList[this.oprationIndex].id
				}))
				// this.fromData.sail.linkNameCopy = this.isScenicTicketDTOList[0].sailTicket[0].passengerName
				// this.PassengersName = this.isScenicTicketDTOList[0].sailTicket[0].passengerName
				// console.log('00000', this.isScenicTicketDTOList[0]);
				let obj = this.fromData.sailTicket[0]
				let obj1 = obj
				this.PassengersName = obj1.realName
				this.fromData.sail.linkName = obj1.realName
				this.fromData.sail.linkNameCopy = obj1.realName

				//setTimeout(() => {
				let ticketType = this.typeCfgJson[this.isScenicTicketDTOList[this.oprationIndex].ticketType];
				if (this.isScenicTicketDTOList[this.oprationIndex].num == this.fromData.sailTicket.length) {
					var isOk = this.fromData.sailTicket.every((item) => item.personType === ticketType);
					if (isOk || ticketType == 5) { //基湖沙滩半价票不限制
						this.addShow = false;
						this.$set(this.isScenicTicketDTOList[this.oprationIndex], 'sailTicket', this.fromData
							.sailTicket);
					} else {
						let typeName = this.typeCfgSc[this.isScenicTicketDTOList[this
							.oprationIndex].ticketType];
						// this.fromData.sail.linkNameCopy = this.isScenicTicketDTOList[0].sailTicket[0].passengerName
						// this.PassengersName = this.isScenicTicketDTOList[0].sailTicket[0].passengerName
						uni.showToast({
							title: "当前票种为" + typeName + "，请选择对应的游客类型",
							icon: 'none',
							duration: 4000
						})
					}
				} else {
					uni.showToast({
						title: "乘客数量不对称，请重新选择",
						icon: 'none',
						duration: 4000
					})

				}
				//}, 3000)
			},
			getTime(currentDate) {
				let dateArr = [];
				for (let i = 0; i < 3; i++) {
					let date = this.getDay(i, currentDate);
					dateArr.push(date);
				}
				this.dateArr = dateArr;
			},
			getDay(day, currentDate) {
				if (currentDate) {
					var today = new Date(currentDate);
				} else {
					var today = new Date();
				}
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;

				today.setTime(targetday_milliseconds); //注意，这行是关键代码

				var tYear = today.getFullYear();
				this.currentYear = tYear;
				var tMonth = today.getMonth();
				var tDate = today.getDate();
				var week = today.getDay();
				tMonth = this.doHandleMonth(tMonth + 1);
				tDate = this.doHandleMonth(tDate);
				let json = {
					time: tMonth + "-" + tDate,
					week: week,
					price: this.list.realPrice || 0.01,
				}
				return json
			},
			doHandleMonth(month) {
				var m = month
				if (month.toString().length == 1) {
					m = "0" + month;
				}
				return m;
			},
			selectPerson(index) {
				this.$set(this.addList[index], 'isSelect', !this.addList[index].isSelect);
			},
			deletePerson(item) {
				this.$api.del('/api/commonPerson', [item.id]).then(res => {
					if (res.data.code === 0) {
						this.addList.forEach((d, i) => {
							this.$refs['swipeAction' + i][0].closeHandler();
						})
						this.toGetPassengers();
						let fidx = this.fromData.sailTicket.findIndex(d => d.id == item.id);
						if (fidx > -1) this.fromData.sailTicket.splice(fidx, 1);
					} else this.$showModal(res.data.msg)
				})
			},
			toEdit(item, main) {
				if (main) {
					uni.navigateTo({
						url: '/pagesMy/commonInformation/add?type=ship&main=1&item=' + JSON.stringify(
							item),
						events: {
							editPassengerSuccess: data => {
								this.toGetPassengers();
							},
							editPassenger: data => {

							},
						}
					})
				} else {
					uni.navigateTo({
						url: '/pagesMy/commonInformation/add?type=ship&item=' + JSON.stringify(item),
						events: {
							editPassengerSuccess: data => {
								this.toGetPassengers();
							}
						}
					})
				}

			},
			toGetPassengers(callback) {
				this.$api.get('/api/commonPerson/list', {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}).then(res => {
					if (res.data.code === 0) {
						this.addList = this.$uct.setPersonType(res.data.data, 2);
						this.addList = this.addList.filter(l => l.personType != 3 && l.age < 70);
						this.addList.forEach((d, i) => {
							d.passengerNameCopy = this.$aesTm.tuomin(d.passengerName, 1);
							d.cardCopy = this.$aesTm.tuomin(d.card, 3);
							this.$set(this.addList[i], 'isSelect', false);
						})
						callback && callback()
					} else this.$showModal(res.data.msg);
				})
			},
			toHref(url) {
				// /pagesTrip/scenicSpots/orderList  订单页面
				uni.navigateTo({
					url: url
				})
			},
			close2() {
				this.$set(this, 'feeShow', false);
			},
			minus(index, index2) {
				this.isScenicTicketDTOList[index].sailTicket.splice(index2, 1);
			},
			addPerson() {
				this.$login().then(res => {
					if (res === 0) {
						uni.navigateTo({
							url: '/pagesMy/commonInformation/add?type=ship',
							events: {
								addPassengerSuccess: data => {
									this.toGetPassengers();
								}
							}
						})
					} else this.$refs['phoneNumber'].show = true;
				})
			},
			// 提交订单
			btnSail() {
				this.fromData.sailTicket = [];
				for (let i = 0; i < this.isScenicTicketDTOList.length; i++) {
					if (this.isScenicTicketDTOList[i].sailTicket) {
						this.fromData.sailTicket = this.fromData.sailTicket.concat(this.isScenicTicketDTOList[i]
							.sailTicket)
					}
					this.fromData.sailTicket[i].face = this.isScenicTicketDTOList[i].face
					this.fromData.sailTicket[i].required = this.isScenicTicketDTOList[i].required
					this.fromData.sailTicket[i].ticketName = this.isScenicTicketDTOList[i].ticketName
				}
				if (this.fromData.sailTicket.length == 0) {
					return this.$showToast("请添加乘客");
				}
				if (this.fromData.sail.linkNameCopy == '') {
					return this.$showToast("请填写联系人");
				}
				if (!this.$reg.mobile(this.fromData.sail.linkMobileCopy)) {
					return this.$showToast("请填写正确的联系人手机号");
				}

				let newData = JSON.parse(JSON.stringify(this.fromData));
				newData.sail.linkName = this.$aesTm.encrypt(newData.sail.linkNameCopy);
				newData.sail.linkMobile = this.$aesTm.encrypt(newData.sail.linkMobileCopy);

				newData.sailTicket.forEach(d => {
					delete d.idCodeCopy
					delete d.realNameCopy
					d.idCode = this.$aesTm.encrypt(d.idCode);
					d.realName = this.$aesTm.encrypt(d.realName);
				})
				delete newData.sail.linkNameCopy
				delete newData.sail.linkMobileCopy
				console.log('0000', this.fromData);
				newData.discountCouponUserId = this.coupon.id
				this.$api.post('/api/scenic/submitOrder', newData)
					.then(res => {
						if (res.data.code == 0) {
							this.orderId = res.data.data.orderCode
							this.realityPay = res.data.data.realityPay
							this.$refs.wxPay.payShow = true;
						} else {
							uni.showModal({
								title: "提示",
								content: res.data.msg,
								confirmText: "确定",
								showCancel: false,
								success: (res) => {

								}
							})
						}
					})
			},
			//关闭支付弹框
			closePay() {
				this.$refs.wxPay.payShow = false;
				setTimeout(() => {
					uni.redirectTo({
						url: '/pagesMy/order/index?name=景点门票&type=0&typeIndex=2'
					})
				}, 1000)
			},
			toPay() {
				this.lsKey = 'toPay';
				this.$login().then(res => {
					if (res === 0) return this.confrimPay();
					else this.$refs['phoneNumber'].show = true;
				})
			},
			cancelPay() {
				let url = '/pagesTrip/scenicSpots/orderDetail?orderCode=' + this.orderId + '&status=0';
				uni.redirectTo({
					url
				})
			},
			confrimPay() {
				this.$api.post('/order/icbc/createOrder', {
					orderCode: this.orderId,
					tradeType: 'JSAPI',
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}, false).then(res => {
					if (res.statusCode == 200 && res.data != null) {
						this.$refs.wxPay.payShow = false;
						this.$wxPay(res.data).then(result => {
							uni.navigateTo({
								// url: `${'/pagesTrip/scenicSpots/paySuccess?orderId='+this.orderId+'&realityPay='+this.realityPay}`
								url: `/pagesTrip/scenicSpots/paySuccess?orderId=${this.orderId}&realityPay=${this.realityPay}`
							})
						})
					}
				})
			},
		},
		computed: {},
	}
</script>

<style lang="less" scoped>
	/deep/.u-navbar__content__title {
		color: #111111 !important;
	}
</style>
<style scoped lang="scss">
	/deep/.u-input__content__field-wrapper__field {
		font-size: 30rpx !important;
	}

	/deep/.u-cell__body {
		padding: 20rpx 0 !important;
	}

	.red {
		color: #f44;
	}

	.operation {
		box-sizing: border-box;
	}

	.page {
		background-color: #F5F8FA;
		min-height: 100%;
		box-sizing: border-box;
		padding-bottom: 90px;
	}

	.person {
		padding: 36rpx 24rpx 1rpx;
		border-radius: 16rpx;
		width: 700rpx;
		background-color: #fff;
		margin: 0 auto 20rpx;
		box-sizing: border-box;

		.tit {
			color: #111;
			font-size: 32rpx;
			margin-bottom: 40rpx;
			font-weight: bold;
		}

		/deep/ .u-line {
			border-color: #EFEFEF !important;
			border-bottom-width: 1rpx !important;
			transform: scaleY(1) !important
		}
	}

	.hander-one {
		background: url('https://i.ringzle.com/file/20240129/323bce42369f4d228d5653b8a4249095.png') top center no-repeat;
		background-size: 100% 30%;
		box-sizing: border-box;
		// padding-bottom: 140rpx;
	}

	.operate {
		margin: 20rpx auto 10rpx;
		border-radius: 40rpx;
		background-color: #fff;
		width: 94%;

	}

	// 费用明细
	.feeDetail {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		height: 680rpx;
		overflow: auto;
		padding: 50rpx 30rpx;
		border-bottom: 1px solid #eee;

		.tit {
			display: flex;
			justify-content: space-between;
			margin-bottom: 60rpx;

			text {
				&:nth-child(1) {
					font-size: 36rpx;
					color: #333;
				}
			}
		}

		.list {
			.top {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				:nth-child(1) {
					font-size: 30rpx;
				}

				:nth-child(2) {
					flex: 1;
					margin: 4px 0 0 15px;
				}

				:nth-child(3) {
					// width: 300rpx;
					// text-align: right;
					color: #FF4141;
					font-size: 36rpx;
				}


			}

			.time {
				display: inline-block;
				font-size: 24rpx;
				margin-bottom: 20rpx;
				color: #808080;

			}
		}

	}

	.yhq {
		height: 90rpx;
		width: 700rpx;
		margin: 20rpx auto 0;
		border-radius: 16rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	// popoup 新增游客弹框 
	.addPersonPop {
		.inner {
			padding: 0 24rpx 48rpx;


			.tit {
				display: flex;
				justify-content: space-between;
				margin-bottom: 60rpx;

				text {
					&:nth-child(1) {
						font-size: 36rpx;
						color: #333;
					}
				}
			}

			.list {
				.top {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;

					:nth-child(1) {
						font-size: 30rpx;
					}

					:nth-child(2) {
						flex: 1;
						margin: 4px 0 0 15px;
					}

					:nth-child(3) {
						// width: 300rpx;
						// text-align: right;
						color: #FF4141;
						font-size: 36rpx;
					}


				}

				.time {
					display: inline-block;
					font-size: 24rpx;
					margin-bottom: 20rpx;
					color: #808080;

				}
			}

		}

		// popoup 新增游客弹框 
		.addPersonPop {
			.inner {
				padding: 0 24rpx 48rpx;


				.tit {
					font-size: 32rpx;
					color: #333;
					text-align: center;
					margin-bottom: 40rpx;
					margin-top: 64rpx;
				}

				.addPerson {
					height: 88rpx;
					border-radius: 16rpx;
					margin-bottom: 60rpx;

				}

				.checkbox {
					margin-left: -30rpx;
				}

				.title {
					margin-left: 12rpx;

					.top {
						margin-bottom: 12rpx;

						text {
							&:nth-child(1) {
								color: #333;
								font-size: 32rpx;
								margin-right: 20rpx;
								font-weight: bold;
								font-family: PingFang-SC-Bold, PingFang-SC;
							}

							&:nth-child(2) {
								background-color: #EEF0F5;
								border-radius: 8rpx;
								color: #94A9C8;
								font-size: 24rpx;
								padding: 2rpx 12rpx;
							}
						}
					}

					.bottom {
						text {
							&:nth-child(1) {
								color: #AAA;
								font-size: 24rpx;
								margin-right: 8rpx;
							}

							&:nth-child(2) {
								color: #111;
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}

		.operation {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			background-color: #fff;
			height: 124rpx;
			position: fixed;
			bottom: 0;
			width: calc(100% - 60rpx);
			z-index: 10;
			box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.06);
			padding-top: 16rpx;

			.left {
				color: #FF4141;
				font-size: 24rpx;
				position: relative;

				text {
					vertical-align: middle;
				}

				text:nth-child(1) {
					color: #666;
					margin-right: 16rpx;
				}

				text:nth-child(3) {
					font-size: 48rpx;
				}

				text:nth-child(4) {
					position: absolute;
					font-size: 24rpx;
					color: #AAA;
					left: 0;
					top: 50rpx;
				}
			}

			.right {
				display: flex;
				min-width: 200rpx;
				height: 80rpx;

				text {
					width: 220rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					color: #fff;
					border-radius: 40rpx;
					margin-left: 24rpx;
					font-size: 32rpx;
					// background-image: linear-gradient(to right, #FF7D43, #FEAC2C);
					background-color: #007A69;
				}
			}

		}

		.topInfo {
			padding: 36rpx 30rpx;
			background-color: #fff;
			width: calc(100% - 24px);
			box-sizing: border-box;
			margin: 0 auto;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.date {
				color: #808080;
				font-size: 26rpx;
			}

			.remark {
				margin: -14rpx 0 30rpx;
				color: #88919D;
			}

			.name {
				font-size: 40rpx;
				color: #111;
				margin-bottom: 24rpx;
				font-weight: bold;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					font-size: 32rpx;
				}

				.right {
					font-weight: inherit;
					color: #999;
					font-size: 24rpx;

					text {
						font-size: 36rpx;
					}
				}
			}

			.addPerson {
				height: 88rpx;
				border-radius: 16rpx;
				margin-bottom: 60rpx;
				font-size: 28rpx;

			}

			.checkbox {
				margin-left: -30rpx;
			}

			.title {
				margin-left: 12rpx;

				.top {
					margin-bottom: 12rpx;

					text {
						&:nth-child(1) {
							color: #333;
							font-size: 32rpx;
							margin-right: 20rpx;
							font-weight: bold;
							font-family: PingFang-SC-Bold, PingFang-SC;
						}

						&:nth-child(2) {
							background-color: #EEF0F5;
							border-radius: 8rpx;
							color: #94A9C8;
							font-size: 24rpx;
							padding: 2rpx 12rpx;
						}
					}
				}

				.bottom {
					text {
						&:nth-child(1) {
							color: #AAA;
							font-size: 24rpx;
							margin-right: 8rpx;
						}

						&:nth-child(2) {
							color: #111;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}

	.operation {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		background-color: #fff;
		height: 140rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 10;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.06);

		.left {
			color: #FF4141;
			// margin-top: -28rpx;
			font-size: 24rpx;
			position: relative;

			text {
				vertical-align: middle;
			}

			text:nth-child(1) {
				color: #666;
				margin-right: 16rpx;
			}

			text:nth-child(3) {
				font-size: 48rpx;
			}

			text:nth-child(4) {
				position: absolute;
				font-size: 24rpx;
				color: #AAA;
				bottom: -16rpx;
				left: 0;
			}
		}

		.right {
			display: flex;
			min-width: 200rpx;

			text {
				width: 220rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				border-radius: 40rpx;
				margin-left: 24rpx;
				font-size: 32rpx;
				// background-image: linear-gradient(to right, #FF7D43, #FEAC2C);
				background-color: #007A69;
			}
		}

	}

	.topInfo {
		padding: 36rpx 30rpx;
		background-color: #fff;
		width: calc(100% - 24px);
		box-sizing: border-box;
		margin: 0 auto;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		// padding-bottom: 0;


		.date {
			color: #808080;
			font-size: 26rpx;
		}

		.remark {
			margin: -14rpx 0 30rpx;
			color: #88919D;
		}

		.name {
			font-size: 40rpx;
			color: #111;
			margin-bottom: 24rpx;
			font-weight: bold;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				font-size: 32rpx;
			}

			.right {
				font-weight: inherit;
				color: #999;
				font-size: 24rpx;

				text {
					font-size: 36rpx;
				}
			}
		}

		.addPerson {
			height: 68rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			// font-size: 28rpx;
			// background-color: #F0F8F6;

			// margin-top: 40rpx;

			// border-radius: 16rpx;
			// border: 1rpx dotted #007A69;
			background-image: url('https://i.ringzle.com/file/20240415/5d72e22d58744b9bb740a3333d3d2b42.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			// padding: 16rpx;
			// background-color: #F0F8F6;

			image {
				width: 26rpx;
				height: 26rpx;
			}

			text {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #007A69;
				margin-left: 8rpx;
			}


		}

	}


	.chekedPerson {
		display: block;
		width: 100%;
		margin-top: 14rpx;

		.title {
			margin-left: 12rpx;

			.index {
				font-size: 30rpx;
				font-weight: bold;
				font-family: PingFang-SC-Bold, PingFang-SC;
				margin-right: 20rpx;
				color: #333;
			}

			.top {
				margin-bottom: 8rpx;

				text {
					&:nth-child(2) {
						background-color: #EEF0F5;
						border-radius: 8rpx;
						color: #94A9C8;
						font-size: 24rpx;
						padding: 2rpx 12rpx;
					}
				}
			}

			.bottom {
				text {
					color: #AAA;
					font-size: 24rpx;
					margin-right: 6rpx;
				}
			}
		}

	}

	.mark {
		margin-bottom: 70rpx;
		color: #FF7D01;
		font-size: 24rpx;

		text:nth-child(2) {
			margin: 0 24rpx;
		}
	}

	.book {
		background-color: #fff;
		margin: 20rpx 0;
		padding: 40rpx 24rpx 2rpx;
		border-radius: 16rpx;

		.tit {
			margin-bottom: 40rpx;

			text {
				&:nth-child(1) {
					font-size: 36rpx;
					color: #111;
					font-weight: bold;
					font-family: PingFang-SC-Bold, PingFang-SC;
				}

				&:nth-child(2) {
					font-size: 24rpx;
					margin-left: 20rpx;
					color: #999;
				}
			}


		}

		.date {
			display: grid;
			grid-template-columns: auto auto auto auto;
			gap: 20rpx;
			margin-bottom: 60rpx;

			.item {
				padding: 20rpx 0;
				border: 1rpx solid #007A69;
				font-size: 24rpx;
				text-align: center;
				border-radius: 16rpx;

				text {
					display: block;
					color: #333;

					&:nth-child(2) {
						margin: 8rpx 0;
					}

					&:nth-child(3) {
						color: #007A69;
						font-weight: bold;
					}
				}

				&:last-child {
					padding-top: 40rpx;

					text {
						color: #007A69;

					}

				}
			}

			.itemSelected {
				// background: linear-gradient(90deg, #0EBFFE 0%, #00D3E8 100%);
				background-color: #007A69;
				border: 1rpx solid #007A69;
				font-size: 24rpx;
				text-align: center;
				border-radius: 16rpx;

				text {
					display: block;
					color: #FFFFFF;

					&:nth-child(2) {
						margin: 8rpx 0;
						color: #FFFFFF;
					}

					&:nth-child(3) {
						color: #FFFFFF;
					}
				}

				&:last-child {
					padding-top: 40rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.details {
		padding: 60rpx 30rpx 200rpx;


		.title {
			position: relative;
			text-align: center;

			text {
				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				right: 10rpx;
				top: 50%;
				margin-top: -18rpx;
			}
		}

		.address {
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #333333;
			margin-top: 48rpx;
		}

		.tickets {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 42rpx;

			&>text {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
			}

			&>view {
				font-size: 28rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;

				span {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
				}
			}
		}

		.total {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 61rpx;

			text {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			view {
				height: 36rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}
		}

		.d_middle {
			padding: 40rpx 0 150rpx;

			&>view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 0;

				&:first-child {
					border-bottom: 1rpx solid #EFEFEF;
				}

				&>text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				&>view {
					font-size: 30rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
					display: flex;
					align-items: center;

					span {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #777777;
						margin-left: 10rpx;
					}
				}
			}
		}

		.has_info {
			.add_user {
				height: 88rpx;
				border-radius: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #fff;
				margin-top: 50rpx;
				background-image: url('https://i.ringzle.com/file/20240415/5d72e22d58744b9bb740a3333d3d2b42.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;



				image {
					width: 26rpx;
					height: 26rpx;
					margin-right: 12rpx;
				}

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #007A69;
					// margin-left: 12rpx;
					letter-spacing: 2rpx;
				}
			}

			.add_list {
				padding-top: 30rpx;
				max-height: 478rpx;
				overflow-y: auto;

				.sac_item {
					display: flex;
					align-items: center;
					padding: 36rpx 24rpx;

					.chk {
						width: 38rpx;
						height: 38rpx;
					}

					.si_info {
						width: calc(100% - 96rpx);
						padding-left: 22rpx;

						.name {
							display: flex;
							align-items: center;

							view:first-child {
								font-size: 32rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #111111;
								line-height: 32rpx;
							}

							view:last-child {
								padding: 6rpx 8rpx;
								line-height: 24rpx;
								text-align: center;
								background: #F5F8FA;
								border-radius: 8rpx;
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #94A9C8;
								margin: 5rpx 0 0 28rpx;
							}
						}

						.idcard {
							margin-top: 20rpx;

							&>text {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #111111;
								line-height: 24rpx;

								&:first-child {
									color: #AAAAAA;
									margin-right: 10rpx;
								}
							}
						}
					}

					.edit {
						width: 36rpx;
						height: 36rpx;
					}
				}


			}
		}

		.add_submit {
			width: calc(100% - 60rpx);
			height: 88rpx;
			background: #007A69;
			border-radius: 44rpx;
			position: fixed;
			bottom: 69rpx;
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}

	.num {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16rpx;

		.input {
			margin: 0 30rpx;
			font-size: 28rpx;
		}

		text {
			font-size: 24rpx;
			color: #FF4141;

			&:nth-child(1) {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
				font-family: PingFang-SC-Bold, PingFang-SC;
			}

			&:nth-child(3) {
				font-size: 36rpx;
				color: #FF4141;
				margin-right: 40rpx;
			}

			&.icon {
				display: inline-block;
				width: 100rpx;
				flex: 1;
				text-align: right;
				padding-top: 12rpx;
			}
		}
	}

	.minus,
	.plus {
		justify-content: center;
		display: flex;
		width: 44rpx;
		height: 44rpx;
		line-height: 44rpx;
		padding: 11rpx 9rpx;
		border: 1px solid #999;
		border-radius: 6rpx;
		box-sizing: border-box;
	}

	.plus {
		background-color: #007A69;
		border-color: #007A69;
	}

	.cellBox,
	.yhq {

		.icon {
			border-radius: 6rpx;
			background-color: #FF4141;
			width: 34rpx;
			height: 34rpx;
			color: #fff;
			font-size: 22rpx;
			text-align: center;
			line-height: 34rpx;
			margin-right: 6rpx;
		}

		.title {
			display: flex;
			align-items: center;
			width: 100%;

			.input {
				padding-left: 10rpx;
				font-size: 26rpx
			}

			text {
				font-size: 30rpx;
				// margin-right: 38rpx;

				&:last-child {
					color: #AAA;
					font-size: 30rpx;
				}
			}

		}
	}

	/deep/.u-cell__body .data-v-1c4434ae {
		align-items: flex-start;
	}
</style>